<html>
    <head>
        <!-- Some basic meta info -->
        <title>Example</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <!-- A stylesheet to make things automatically look nice -->
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css">

        <!-- Link to the socket.io info -->
        <script type="text/javascript" src="//code.jquery.com/jquery-1.4.2.min.js"></script>
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/socket.io/1.3.6/socket.io.min.js"></script>

        <!-- Script to handle socket.io -->
        <script src="https://cdn.jsdelivr.net/npm/phaser@3.15.1/dist/phaser-arcade-physics.min.js"></script>

        <script type="text/javascript" src="{{url_for('static', filename='control.js')}}?v={{ range(1, 5000000) | random }}"></script>
    </head>

<body>
    <div style="margin: 25px; display: flex; flex-direction: column;">
        <div id="game_container" style="padding: 50px">
        </div>
        <h1 class="title">Game Console.</h1>
        <textarea id="chat" style="width: 500px; height: 250px; font-size: 18px; font-family: monospace; margin-top: 10px;"></textarea>
        <div style="display: flex; flex-direction: row;">
            <input type="text" id="textfield_input" style="height: 30px; width: 400px; margin-top: 5px; margin-right: 10px;" class="textfield">
            <button id="send_button" class="button is-primary" style="margin-top: 5px; width: 90px; height: 30px;">Send</button>
        </div>
    </div>
</body>
</html>